<script lang="ts" setup>
import type { CurrencyCode } from '~/composables/useCurrencyData'

defineOptions({
  name: 'AppVipBonus',
})
interface PrizeConfig {
  level: number
  cash_type: number
  currency_id: CurrencyCode
  amount: string
}

const { isLogin, currentGlobalCurrency } = storeToRefs(useAppStore())
const { vipConfigArray, isZeroShowOther, isVipPointMode } = useVipInfo()

// cash_type = 818 //晋级奖金
// cash_type = 819 //日奖金
// cash_type = 820 //周奖金
// cash_type = 821 //月奖金

const vipPrizeConfig = ref<{ [t: string]: PrizeConfig | null }>({})
const { runAsync: runAsyncVipPrizeConfig, loading: isLoading } = useRequest(ApiMemberVipPrizeConfig, {
  onSuccess(data) {
    const _data = data.data ?? []
    for (const key in _data)
      vipPrizeConfig.value[key] = _data[key].find(item => item.cash_type === 818) ?? null
  },
})

const columnConfig: ComputedRef<{ [t: string]: Column }> = computed(() => {
  return {

    VIP: {
      title: `${$t('grade', { vip: 'VIP' })}`,
      dataIndex: 'level',
      align: 'center',
      slot: 'level',
    },
    // CZ: {
    //   title: t('vip_recharge_money'),
    //   dataIndex: 'recharge',
    //   align: 'center',
    //   slot: 'recharge',
    // },
    DM: {
      title: isVipPointMode.value ? $t('integral') : $t('vip_add_mosaic'),
      dataIndex: 'upgrade',
      align: 'center',
      slot: 'score',
    },
    UP: {
      title: $t('vip_promotion_bonus'),
      dataIndex: 'amount',
      align: 'center',
      slot: 'up_gift',
      thPaddingX: 10,
      isThLineClamp2: true,

    },
    // BD: {
    //   title: t('vip_birthday_bonus'),
    //   dataIndex: 'birthday',
    //   align: 'center',
    //   slot: 'birthday',
    // },
    // {
    //   title: t('keep_integral'),
    //   dataIndex: 'retain_score',
    //   align: 'center',
    //   slot: 'retain_score',
    //   width: '30%',
    // },
  }
})

const getBonusConfig = computed(() => {
  const _vipConfigArray = vipConfigArray.value.filter(item => item.level !== 0)
  return _vipConfigArray.map((item, index) => {
    return {
      level: item.level,
      upgrade: item.upgrade,
      retain: item.retain,
      ...vipPrizeConfig.value[`v${index + 1}`],
    }
  })
})
const getShowColumn = computed(() => {
  const arr: Column[] = []
  for (const key in columnConfig.value) {
    const item = columnConfig.value[key]
    if (key === 'VIP') {
      arr.push(item)
      continue
    }
    if (!isArrKeyZero(item.dataIndex))
      arr.push(item)
  }
  return arr.length === 1 ? [] : arr // 如果只有vip等级，则全部不展示
})
/** 判断数组某个字段是否都有值 */
function isArrKeyZero(key: string) {
  return getBonusConfig.value.every(item => isZeroShowOther(item[key]))
}

watch(() => currentGlobalCurrency.value, (newVal) => {
  runAsyncVipPrizeConfig({
    cur: currencyConfig[newVal].cur,
  })
})

application.allSettled([runAsyncVipPrizeConfig({ cur: currencyConfig[isLogin.value ? currentGlobalCurrency.value : languageConfig[getCurrentLanguageForFrontend()].currency].cur })])
</script>

<template>
  <div class="vip-vip-bonus">
    <BaseTable
      :columns="getShowColumn" :data-source="getShowColumn.length ? getBonusConfig : []" :skeleton-width="50"
      :show-out-load="isLoading"
      :loading="isLoading"
      style="color: #B3BEC1; font-size: 0.75rem;"
      class="rounded-sm"
    >
      <template #level="{ record }">
        <div class="center">
          <!-- ToDo vip -->
          <BaseImage width="1.5rem" :is-network="true" :url="`/images/vip/${record.level}_bc.webp`" />
          <span class="text-xs text-white font-semibold ml-1">{{ `VIP${record.level}` }}</span>
        </div>
      </template>
      <template #score="{ record: { upgrade } }">
        <div v-if="isZeroShowOther(upgrade)" class="font-semibold">
          -
        </div>
        <div v-else class="center font-semibold">
          {{ parseInt(upgrade) }}
        </div>
      </template>
      <template #up_gift="{ record: { amount, currency_id } }">
        <div v-if="isZeroShowOther(amount) || !(+currency_id > 0) ">
          -
        </div>
        <div v-else class="center vip-amount">
          <AppAmount :amount="amount" :currency-type="getCurrencyConfigByCode(currency_id).name" />
        </div>
      </template>
    </BaseTable>
  </div>
</template>

<style lang="scss" scoped>
.vip-vip-bonus{
  --tg-table-td-padding-x: 0;
  --tg-table-td-padding-y: 0;
  --tg-table-th-padding-x: 0;
    --bc-amount-currency-size: 1rem;
  --tg-app-amount-font-size: 0.75rem;
}
</style>
